import React, { useEffect, useState } from "react";
import "./socketio-client.css";
import io from "socket.io-client";

const TestSocketIOClient = () => {
    const [val, setVal] = useState("");

    useEffect(() => {
        const socket = io();
        socket.on("connect", () => {
            console.log("前端: socket已连接...");
        });

        socket.emit("chat", val);

        socket.on("chatToAll", (msg) => {
            document.querySelector(".ta").innerHTML =
                "我是前端，我接收到后端发来的消息：" + msg;
        });
    }, [val]);

    const sendMsg = () => {
        // socket.emit('chat', val)
    };

    return (
        <div className="wrap">
            <h3>显示区</h3>
            <textarea className="ta"></textarea>
            <br />
            <input
                type="text"
                className="inp"
                autoComplete="off"
                value={val}
                onChange={(e) => {
                    setVal(e.target.value);
                }}
            />
            <br />
            <br />
            <button onClick={sendMsg}>发送消息</button>
        </div>
    );
};

export default TestSocketIOClient;
